<!--
 * @Author: your name
 * @Date: 2021-12-16 10:10:59
 * @LastEditTime: 2021-12-16 20:11:29
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-admin-template\src\pages\privilege.vue
-->
<template>
  <div class="user_container">
    <!-- 第一行 -->
    <el-row>
      <el-col :span="12">
        <el-form :model="params" inline size="small">
        </el-form>
      </el-col>
      <el-col :span="12" style="text-align:left">
        <el-button type="primary" size="small" @click="toAddHandler">添加</el-button>
      </el-col>
    </el-row>   
    <!--/第一行结束  -->
    <!-- 第二行 -->
    <el-table size="small" :data="users" stripe row-key="id"
    border
   
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="路径" prop="way"></el-table-column>
      <el-table-column label="类型" prop="type1"></el-table-column>
      <el-table-column label="序号" prop="number"></el-table-column>
      <el-table-column label="图标" prop="locn"></el-table-column>
      <el-table-column label="状态" prop=" ">
        <el-tag type="success">显示</el-tag>
      </el-table-column>
          
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="toEditHandler(scope.row)">修改</el-button>
          <el-button type="text" size="mini" @click="toDelHandler(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- /第二行结束 -->
    <!-- 第三行 -->
    <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
    <!-- /第三行结束 -->
    <!-- 第四行模态框 -->
    <el-dialog :title="title" :visible.sync="visible">
      <el-form :model="form"  label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="male"></el-option>
            <el-option label="女" value="female"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="visible = false"  size="small">确 定</el-button>
      </div>
    </el-dialog>
    <!-- /第四行结束 -->
  </div>
</template>
<script>
export default {
  // 1. 数据，变量： 函数，并且返回一个对象，声明的变量都要放在返回的对象中。
  data(){
    return {
      title:"",
      visible:false,
      params:{},
      form:{},
      users:[{id:1,name:"工程管理",way:"terry",type1:"menu",number:"1",locn:"icon_3",children: [{
              id: 31,
              name: '工程管理',
              way: '',
              type1: 'menu',
              number:"0",
              locn:"icon_2"
            }]},{id:1,name:"角色权限",way:"larry",type1:"menu",number:"2",locn:"icon_3",children: [{
              id: 31,
              name: '权限管理',
              way: '',
              type1: 'menu',
              number:"0",
              locn:"icon_2"
            }]},
                  {id:2,name:"监测数据",way:"tom",type1:"menu",number:"3",locn:"icon_3",children: [{
              id: 31,
              name: '报警信息',
              way: '',
              type1: 'menu',
              number:"0",
              locn:"icon_2"
            }]},
                  {id:3,name:"工程配置",way:"tom",type1:"menu",number:"4",locn:"icon_3",children: [{
              id: 31,
              name: '系统配置',
              way: '',
              type1: 'menu',
              number:"0",
              locn:"icon_2"
            }]},
                  {id:4,name:"工单管理",way:"tom",type1:"menu",number:"5",locn:"icon_3",children: [{
              id: 31,
              name: '工单列表',
              way: '',
              type1: 'menu',
              number:"0",
              locn:"icon_2"
            }]},
                  {id:5,name:"工程设备2",way:"tom",type1:"menu",number:"6",locn:"icon_3",children: [{
              id: 31,
              name: '工程管理',
              way: '',
              type1: 'menu',
              number:"0",
              locn:"icon_2"
            }]}]
    }
  },
   
  // 2. 方法
  methods:{
    
    toAddHandler(){
      this.visible = true;
      this.form = {}
      this.title = "新增用户"
    },
    toEditHandler(row){
      this.visible =true;
      this.form = row;
      this.title = "修改用户"
    },
    toDelHandler(row){
      alert(row.id);
    } 
 }
}
</script>
<style scoped>
.user_container {
  padding:1em .5em;
}
</style>